<template>
  <div class="app-container">
    <!-- 上方按钮 -->
    <div>
      <div style="float: left; margin-bottom: 10px">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="preAdd"
          >新增</el-button
        >
      </div>
      <right-toolbar
        @queryTable="getRecommendCourseList"
        style="float: right"
      ></right-toolbar>
    </div>
    <!--课程信息：复选框、id、title、cover、grade、sort、subjectLevelOne、subjectLevelTwo，并可以进行移除操作 -->
    <el-table :data="tableData" style="width: 100%" height="90vh" border>
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <!-- 索引 -->
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <!-- 封面 -->
      <el-table-column label="封面">
        <template slot-scope="scope">
          <img
            :src="scope.row.cover"
            style="width: 80px; height: 50px"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column prop="grade" label="等级"></el-table-column>
      <el-table-column prop="type" label="类型"></el-table-column>
      <el-table-column prop="sort" label="排序"></el-table-column>
      <el-table-column
        prop="subjectLevelOne"
        label="一级分类"
      ></el-table-column>
      <el-table-column
        prop="subjectLevelTwo"
        label="适用工种"
      ></el-table-column>
      <el-table-column label="课程状态" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.status === "Normal" ? "已发布" : "未发布" }}
          <el-button
            type="primary"
            size="small"
            plain
            v-show="scope.row.status === 'Draft'"
            @click="publihCourse(scope.row.courseId)"
            >发布</el-button
          >
          <el-button
            type="primary"
            size="small"
            plain
            v-show="scope.row.status === 'Normal'"
            @click="unpublihCourse(scope.row.courseId)"
            >下架</el-button
          >
        </template>
      </el-table-column>
      <!-- 创建时间gmtCreate -->
      <el-table-column
        prop="createTime"
        label="创建时间"
        sortable
      ></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="medium"
            @click="handleRemove(scope.$index, scope.row)"
            >移除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增对话框：包括下拉框选择correspondId、排序：sort -->
    <el-dialog
      title="新增"
      :visible.sync="dialogFormVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="form" ref="form" label-width="80px">
        <el-form-item label="课程">
          <el-select
            v-model="form.correspondId"
            filterable
            clearable
            placeholder="请选择（可搜索）"
          >
            <el-option
              v-for="item in courseList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <!-- 数字输入框 -->
          <el-input-number v-model="form.sort"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRecommendCourse">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRecommendCourse,
  addRecommendDetail,
  removeRecommendDetail,
} from "@/api/website/recommendDetail";
import { getAllCourse, unpublihCourse, publihCourse } from "@/api/edu/course";
import { mapGetters } from "vuex";
export default {
  name: "RecommendCourse",
  computed: {
    ...mapGetters(["companyId"]),
  },
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        correspondId: "",
        sort: 1,
        recommendType: 1,
      },
      courseList: [],
    };
  },
  created() {
    this.getRecommendCourseList();
    this.getAllCourse();
  },
  methods: {
    // 获取推荐课程列表
    getRecommendCourseList() {
      getRecommendCourse(this.companyId).then((res) => {
        this.tableData = res.data.list;
      });
    },
    // 获取所有课程
    getAllCourse() {
      getAllCourse(this.companyId).then((res) => {
        this.courseList = res.data.list;
      });
    },
    // 新增推荐课程
    addRecommendCourse() {
      addRecommendDetail(this.form).then((res) => {
        //成功提示
        this.$message({
          type: "success",
          message: "新增成功",
        });
        this.dialogFormVisible = false;
        this.getRecommendCourseList();
      });
    },
    // 删除推荐课程
    handleRemove(index, row) {
      removeRecommendDetail(row.detailId).then((res) => {
        //成功提示
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.tableData.splice(index, 1);
      });
    },
    //发布课程
    publihCourse(id) {
      publihCourse(id).then((res) => {
        if (res.success) {
          this.$message({
            type: "success",
            message: "发布成功!",
          });
          this.getRecommendCourseList();
        }
      });
    },
    //下架课程
    unpublihCourse(id) {
      unpublihCourse(id).then((res) => {
        if (res.success) {
          this.$message({
            type: "success",
            message: "下架成功!",
          });
          this.getRecommendCourseList();
        }
      });
    },
    // 打开新增对话框
    preAdd() {
      this.dialogFormVisible = true;
    },
    // 关闭对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style>
</style>